<template>
    <div>
      <div class="bos">

        <div class="bottom">
            <div class="shang">
                <h3 class="el-icon-s-operation">主题市场</h3>
                <span><a href="#/LimitPage">限时快抢</a></span>
            </div>
            <div class="xia">
              <div>
              <div class="left">
                <ul id="ww">
                  <li id="ee" v-for="aa in show">
                  <span>{{aa.name1}}</span>
                  <span>{{aa.name2}}</span>
                  <span>{{aa.name3}}</span>
                  <span>{{aa.name4}}</span>
                </li>
                </ul>
                <div id="aa">
                  <div>
                    <div class="l1" v-for="(aa,index) in data">
                      <div>
                        <section>
                        <h3>{{aa.bt1}}</h3>
                        <p>更多<small class="el-icon-arrow-right"></small></p>
                        </section>
                        <span v-for="cc in aa.content1">{{cc}}</span>

                      </div>

                      <div>
                        <section>
                        <h3>{{aa.bt2}}</h3>
                        <p class="s1">更多<small class="el-icon-arrow-right"></small></p>
                        </section>
                        <span v-for="cc in aa.content2">{{cc}}</span>

                      </div>
                      <div>
                        <section>
                        <h3>{{aa.bt3}}</h3>
                        <p class="s1">更多<small class="el-icon-arrow-right"></small></p>
                        </section>
                          <span v-for="cc in aa.content3">{{cc}}</span>

                      </div>

                    </div>
                    <div class="r2" v-for="ww in data">
                      <h3>/猜你喜欢/</h3>
                      <section v-for="tt in ww.tu">
                        <img :src="tt.tuu" alt="">
                        <p>{{tt.name}}...</p>
                      </section>
                    </div>
                  </div>
                </div>
              </div>

                <img src="../assets/bj.jpg" alt="" class="bj">
              <div class="right">
                <section>
                  <img src="../assets/02.png" alt="">
                  <p>菇凉好!<small>欢迎来到蘑菇街~</small></p>
                  <span>会员中心</span>
                </section>
                <section>
                  <p class="p1">来蘑菇街APP</p>
                  <p class="p2">海量时尚好货</p>
                  <img src="../assets/02.png" alt="">
                  <p class="p3">更多实惠好物></p>
                </section>
              </div>
              </div>
            </div>
        </div>
    </div>
    </div>
</template>

<script>

    import shop from '../batch_shop'
    export default {
        data: function () {
            return {
              // data:datas.data,
              data:shop.data,
              show:shop.show
            }
        },
      methods:{
          aa(){

          }
      }

    }
</script>

<style scoped>
/*.bos{*/
  /*width:90% ;*/
  /*height: 800px;*/
  /*margin: 0 auto;*/
  /*background: darkgray;*/
/*}*/
  .bos{
    /*background: darkgray;*/
    /*height: 800px;*/
    width: 100%;
    background: #fff;
    /*background: orange;*/
  }

#aa{
  position: absolute;
  margin-left: 274px;
  top:170px;
  background: #fff;
  width: 800px;
  height:470px ;
  display: none;
}
#aa>div{
  width: 95%;
  margin: 0 auto;
  overflow: hidden;
  padding-top: 20px;
}
#aa .l1{
  width: 60%;
  float: left;
}
#aa .l1 section{
  overflow: hidden;
  margin-top: 20px;
}
#aa .l1 h3{
  font-size: 14px;
  margin: 10px;
  float: left;
}
#aa .l1 p{
  float: right;
  font-size: 12px;
}


#aa .l1 div span{
  /*width: ;*/
  display: inline-block;
  margin: 10px;
  font-size: 14px;
}


#aa .r2{
  width: 35%;
  float: right;
  overflow: hidden;
  border-left: solid 1px #ccc;
  padding-left: 5px;
}
#aa .r2 h3{
  text-align: center;
  margin: 10px 0;
}
#aa .r2 section{
  margin: 5px;
  width: 45%;
  float: left;

}
#aa .r2 img{
  width: 100%;
}
#aa .r2 p{
  /*position: absolute;*/
 font-size: 12px;
}

#ww:hover + #aa{
  display: inline-block;
}

  .bottom .shang{
    text-align: left;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
  }
  .bottom .shang h3{
    background: #ff4466;
    color: #fff;
    width: 16%;
    height: 45px;
    padding: 15px 20px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    float: left;
  }
  .bottom .shang span{
    float: left;
  font-size: 18px;
  border-right: solid 1px #ccc;
  padding: 0px 30px;
    margin-top: 10px;
}
.bottom .shang span a{
  color:#000;
  cursor: pointer;
}
.bottom .shang span a:hover{
  color:red;
}
  .bottom .xia{
    /*background-image: url(../assets/bj.jpg);*/
    background: #ffb4bf;
    border-top: solid 2px red;
  }
  .bottom .xia>div{
    width: 90%;
    overflow: hidden;
    margin: 0 auto;
  }
  .bottom .xia .left{
    width: 16%;
    text-align: left;
    float: left;
    background: #fff0f2;
  }
.bottom .xia .left li{
  padding: 6px 5px;
  /*margin: 10px 0;*/
  font-size: 14px;
}
.bottom .xia .left li:hover{
  background: #fff;
}
.bottom .xia .left li span{
  margin: 0 5px;
  color: #ccc;
}
.bottom .xia .left li span:hover{
  cursor: pointer;
  text-decoration: underline;
}
.bottom .xia .left li span:first-child{
  font-weight: 800;
  color: #000;
  font-size: 16px;
}
.bottom .xia .left li span:nth-child(2){
  color: #ff4466;
}
  .bottom .bj{
    width: 69%;
    height: 100%;
    float: left;
  }
.bottom .xia .right{
  width: 14%;
  float: left;
}
  .bottom .xia .right section{
    margin: 15px;
   background: #fff;
    width: 260px;
    height: 200px;
    text-align: center;
  }
.bottom .xia .right section:first-child img{
  /*display: inline-block;*/
  /*text-align: center;*/
  width:80px ;
  height: 80px;
  background: #ff94c6;
  border-radius: 50%;
  /*margin:0 auto ;*/
  margin-top:10px ;
  cursor: pointer;
}
.bottom .xia .right section:first-child p{
  font-size: 14px;
  margin-bottom: 10px;
}
.bottom .xia .right section:first-child p small{
  font-size: 14px;
  font-weight: 800;
  margin-left: 5px;
}
.bottom .xia .right section:first-child span{
  border: solid 1px red;
  color: red;
  padding:5px 10px ;
  font-size: 14px;
  cursor: pointer;

}
.bottom .xia .right section:last-child img{
  background: red;
  width:80px ;
  height: 80px;
  margin-bottom: 5px;
}
.bottom .xia .right section:last-child .p1{
  /*background: #000;*/
  padding-top: 20px;
}
.bottom .xia .right section:last-child .p2{
  padding: 5px;

}
.bottom .xia .right section:last-child .p3{
  width: 130px;
  padding: 5px;
  border: solid 1px red;
  border-radius: 10px;
  margin: 0 auto;
  cursor: pointer;
}
</style>
